<template>
	<div class="productBottomNav">		
		<div id="getAttr" :class="{'show':isShow}" @click.self="closeLayer()">
			<div class="attrs">
				<div class="attrs-head clearfix">
					<div class="attr-img pull-left type1-1">
						<div class="type1-1">
							<img class="hidden" height="100%" :src="url+'/ws/img/view/'+attrs.fileId" alt="" @load="initImg($event)" @error="imgError($event)"/>
						</div>
					</div>
					<div class="attr-price pull-left">
						<div class="text-red">{{ showPrice }}</div>
						<div>库存：{{ showStock }}</div>
						<div v-text="tip"></div>
					</div>
					<span class="iconfont icon-ioscloseoutline" @click="closeLayer()" style="cursor:pointer;"></span>
				</div>
				<ul>
					<li v-for="item in attrs.skuPropertyList">
						<h3>{{ item.propertyName }}</h3>
						<div class="opt opt-color">
							<div @click="chooseAttr($event)" :my-name="item.propertyName" :my-id="value.propertyValueId" :my-key="value.propertyValueName" v-for="value in item.skuPropertyValueList">
								<span>{{ value.propertyValueName }}</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<h3 class="pull-left">购买数量</h3>
						<x-number class="pull-right" :min="1" v-model="wantBuy.quantity"></x-number>
					</li>
				</ul>
				<div class="layer-btn btn-group" v-if="isChooseOperation">
					<div class="add-button" @click="chooseOperation('cart')" style="cursor:pointer;">加入购物车</div>
					<div class="buy-button bg-yellow" @click="chooseOperation('buy')" style="cursor:pointer;">立即购买</div>
				</div>
				<div class="layer-btn bg-yellow" @click="finishChoose()" style="cursor:pointer;" v-else>确定</div>			
				
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import {XNumber} from 'vux'
	
	export default {
		name: 'productBottomNav',
		mounted(){
			this.isFirstOpen = true;
			this.init();
		},
		methods:{
			init(){
				this.productId = this.$route.params.productId;
				this.wantBuy.productId = this.$route.params.productId;
			},
			initLayer(){
				this.wantBuy.tenantId = this.attrs.tenantId;
				if(this.attrs.single == 0){//没有sku属性的情况
					this.showPrice = "￥" + this.attrs.singleSku.price;
					this.showStock = this.attrs.singleSku.stock;
					this.wantBuy.productSkuId = this.attrs.singleSku.skuId;
				}else{//有sku属性选择
					if(this.attrs.minPrice != this.attrs.maxPrice){//初始化价格
						this.showPrice = "￥" + this.attrs.minPrice + "-" + this.attrs.maxPrice;
					}else{
						this.showPrice = "￥" + this.attrs.minPrice;
					}
					if(this.attrs.stockStatus === 0 ){//初始化库存
						this.showStock = "无货";
					}else{
						this.showStock = "有货"
					}
					this.tip = "请选择";//初始化提示语
					for(var i = 0;i<this.attrs.skuPropertyList.length;i++){
						var name = this.attrs.skuPropertyList[i].propertyName;
						var id = this.attrs.skuPropertyList[i].propertyId;
						this.tip = this.tip + " " + name;
						this.chooseAttrs[i] = {//初始化已选属性数组
							attrId:id,//属性id
							attrName:name,//属性名
							attrValue:{}//已选属性id、值
						};
					}
				}
			},
			showLayer(type){
				$('.homeBody').addClass('noLoading');
				if(typeof type != "undefined"){
					this.operation = type;
					this.isChooseOperation = false;
				}else{
					this.isChooseOperation = true;
				}
				if(this.isFirstOpen){
					this.initLayer();
				}
				this.isShow = true;
				this.isFirstOpen = false;
			},
			closeLayer(){
				this.isShow = false;
				this.isOpenLayer = false;
				$('#preview-mask .x-layer .layer-content').mCustomScrollbar("update");
			},
			chooseOperation(type){
				this.closeLayer();
			},
			finishChoose(){
				this.closeLayer();
			},
			chooseAttr(e){
				$(e.currentTarget).addClass('active').siblings().removeClass('active');
				var name = $(e.currentTarget).attr("my-name");
				var id = $(e.currentTarget).attr("my-id");
				var value = $(e.currentTarget).attr("my-key");
				this.hasNoChose = false;
				this.noChoseName = [];
				for(var i = 0;i<this.chooseAttrs.length;i++){
					if(this.chooseAttrs[i].attrName == name){//点击的属性加入到已选属性数组中
						this.chooseAttrs[i].attrValue['id'] = id;
						this.chooseAttrs[i].attrValue['key'] = value;
					}else{//未选的属性名加入到未选属性名数组
						if(this.isEmptyObject(this.chooseAttrs[i].attrValue)){
							this.hasNoChose = true;
							this.noChoseName.push(this.chooseAttrs[i].attrName);
						}
					}
				}
				//根据是否存在未选属性设置提示
				if(this.hasNoChose){
					this.tip = "请选择";
					for(var i = 0;i < this.noChoseName.length;i++){
						this.tip = this.tip + " " + this.noChoseName[i];
					}
				}else{
					this.tip = "已选";
					var propertys = [];
					for(var i = 0;i< this.chooseAttrs.length;i++){
						this.tip = this.tip + ' "' + this.chooseAttrs[i].attrValue.key + '"';
						var property = {
							"propertyId":this.chooseAttrs[i].attrId,
							"propertyValueId":this.chooseAttrs[i].attrValue.id
						}
						propertys.push(property);
					}
					var params = {
						"productId" : this.attrs.id,
						"skuPropertyList" : propertys
					}
					console.log(params);
					//获得sku id、价格和库存
					this.$http.post('/ws/api/skus/stock',params).then(function(data){
						if(data.data.meta.code === 0){
							this.showStock = data.data.data.stock;
							this.showPrice = "￥"+data.data.data.price;
							this.wantBuy.productSkuId = data.data.data.skuId;
						}else{
							console.log("出错了~");
							this.$Message.warning('出错了~');
							this.closeLayer();
						}
					});
				}
			},
			isEmptyObject(e) {  
			    var t;  
			    for (t in e){
			    	return false;
			    }
			    return true;  
			},
			initImg(e){
				$(e.target).removeClass("hidden");
			},
			imgError(e){
				$(e.target).addClass("hidden");
			},
		},
		data(){
			return{
				productId :'',
//				tenantId : this.attrs.tenantId,
				isFirstOpen:true,//第一次打开属性选择框
				isCollected:false,//是否已经收藏该商品
				isChooseOperation:false,//弹出框是否提供加入购物车、立即购买按钮组
				operation:'',     //操作 'cart'加入购物车,'buy'立即购买
				showStock:'无',
				showPrice:'￥0.00',
				chooseAttrs:[],   //已选属性数组
				tip:"请选择产品参数",
				hasNoChose:true, //是否有未选择属性
				noChoseName:[],    //未选属性名
				wantBuy:{
					"productSkuId":'',
					"tenantId":'',
					"quantity":1,
					"productId":''
				},
				isShow:false   //展示属性选择框
			}
		},
		computed:{
			isOpenLayer:{
				get:function(){
					return this.showAttr.val;
				},
				set:function(val){
					this.showAttr.val = val;
				}
			},
			tenantId(){
				return this.attrs.tenantId;
			}
		},
		watch:{
			isOpenLayer(newVal,oldVal){
				if(newVal){
					this.showLayer();
				}else{
					this.closeLayer();
				}
			}
		},
		props:{
			showAttr:{
				default:function(){
					return { val:false }
				}
			},
			attrs:{},
			canBuy:{
				default:false
			},
			url:''
		},
		components:{
			XNumber
		}
	}
</script>

<style lang="less">
	body{
		.vux-number-selector{
			height: .73rem;
			line-height: .73rem;
			padding: 0;
			width: .73rem;
			text-align: center;
		}
		.vux-number-input{
			height: .73rem;
			line-height: .73rem;
			padding: 0;
			width: 1.83rem !important;
			font-size: .43rem;
		}
		.weui-cell:before{
			border: 0;
		}
	}
	
</style>

<style scoped lang="less">
	#getAttr{
		width: 100%;
		height: 586px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,.5);
		display: none;
		
		.layer-btn{
			height: 1.43rem;
			line-height: 1.43rem;
			font-size: .5rem;
			border-top: 1px solid #D7D7D7;
		}
		
		.attrs{
			height: 14.7rem;
			bottom: 0;
			width: 100%;
			position: absolute;
			left: 0;
			background: #FFFFFF;
			font-size: .47rem;
			text-align: center;
			p{
				margin: .53rem 0 .43rem;
			}
			.layer-btn{
				position: absolute;
    			width: 100%;
    			bottom: 0;
    			
    			&.btn-group{
    				display: flex;
    				
    				div{
    					width: 50%;
    				}
    				
    				.add-button{
    					background: #EABC16;
    					color: #FFFFFF;
    				}
    			}
			}
			
			.attrs-head{
				height: 3.6rem;
				
				.attr-img{
					width: 4.08rem;
					height: 4.08rem;
					padding: 0.1rem;
					border: 1px solid #F2F2F2;
					border-radius: 0.1rem;
					background: #FFFFFF;
					margin: -.5rem .5rem 0;					
					div{
						width: 100%;
						height: 100%;
						img{
							width:100%;
							height: 100%;
						}
					}
				}
				
				.attr-price{
					max-width: 7rem;
					text-align: left;
					font-size: .43rem;
					
					.text-yellow{
						font-size: .47rem;
					}
					
					div{
						margin-top: .6rem;
					}
				}
				
				.icon-ioscloseoutline{
					margin: .4rem;
					font-size: 0.7rem;
					position: absolute;
					right: 0;
				}
			}
			
			ul{
				width: 100%;
				height: 9.65rem;
				padding: 0 .5rem .5rem;
				overflow: auto;
				position: relative;
				-webkit-overflow-scrolling: touch;
				li{
					padding:0.53rem 0;
					border-bottom: 1px solid #F2F2F2;
					
					h3 {
						font-size: .47rem;
						text-align: left;
						font-weight: 500;
						margin-bottom: .3rem;
					}
					
					.opt{
						display: flex;
						flex-wrap: wrap;
						font-size: .37rem;
						
						div{
							height: .73rem;
							line-height: .73rem;
							padding: 0 .4rem;
							border: 1px solid #ccc;
							color: #CCCCCC;
							margin: 0.1rem 0.2rem;
						}
						
						div.active{
							position: relative;
							border: 1px solid #ED9D2C;
							color:#ED9D2C
						}
						
						div.active span:after{
							content: " ";
							position: absolute;
							bottom: 0;
							right: 0;
							border-top: 0.1rem solid transparent;
						    border-left: 0.1rem solid transparent;
						    border-bottom: 0.1rem solid #ED9D2C;
						    border-right: 0.1rem solid #ED9D2C;
						}
					}
				}
			}
		}

	}
	.show{
		display: block !important;
	}
	.hide{
		display: none !important;
	}
	#getAttr.show .attrs{
		bottom: 0;
		transition: bottom .6s ease-in;
	}
</style>